<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4级菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .menu-container {
            width: 750px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .menu-header {
            background: #2c3e50;
            color: white;
            padding: 15px 20px;
            font-size: 18px;
            font-weight: bold;
        }

        .menu-content {
            max-height: 600px;
            overflow-y: auto;
        }

        .menu-content::-webkit-scrollbar {
            width: 8px;
        }

        .menu-content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .menu-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        .menu-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .menu-item {
            border-bottom: 1px solid #eee;
        }

        .menu-link {
            display: block;
            padding: 12px 20px;
            text-decoration: none;
            color: #333;
            cursor: pointer;
            transition: background-color 0.3s;
            position: relative;
        }

        .menu-link:hover {
            background-color: #f8f9fa;
            color: #007bff;
        }

        .menu-link.active {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .menu-icon {
            display: inline-block;
            width: 16px;
            margin-right: 8px;
            text-align: center;
            transition: transform 0.3s;
        }

        .menu-icon.expanded {
            transform: rotate(90deg);
        }

        .submenu {
            display: none;
            background-color: #fafafa;
        }

        .submenu.show {
            display: block;
        }

        /* 不同层级的样式 */
        .level-1 {
            font-weight: 600;
            font-size: 14px;
        }

        .level-2 {
            padding-left: 40px;
            font-weight: 500;
            font-size: 13px;
            background-color: #f8f8f8;
        }

        .level-3 {
            padding-left: 60px;
            font-weight: 400;
            font-size: 12px;
            background-color: #f0f0f0;
        }

        .level-4 {
            padding-left: 80px;
            font-weight: 400;
            font-size: 11px;
            background-color: #e8e8e8;
        }

        .has-children::after {
            content: '▼';
            float: right;
            font-size: 10px;
            color: #999;
            transition: transform 0.3s;
        }

        .has-children.expanded::after {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="menu-container">
        <div class="menu-header">
            4级导航菜单
        </div>
        <div class="menu-content">
            <ul class="menu-list" id="menuList">
                <!-- 菜单内容将在这里生成 -->
            </ul>
        </div>
    </div>

    <script>
        // 菜单数据
        const menuData = [
            {
                id: 1,
                name: "系统管理",
                children: [
                    {
                        id: 11,
                        name: "用户管理",
                        children: [
                            {
                                id: 111,
                                name: "用户列表",
                                children: [
                                    { id: 1111, name: "普通用户" },
                                    { id: 1112, name: "VIP用户" },
                                    { id: 1113, name: "管理员用户" }
                                ]
                            },
                            {
                                id: 112,
                                name: "权限设置",
                                children: [
                                    { id: 1121, name: "角色管理" },
                                    { id: 1122, name: "权限分配" },
                                    { id: 1123, name: "访问控制" }
                                ]
                            }
                        ]
                    },
                    {
                        id: 12,
                        name: "系统设置",
                        children: [
                            {
                                id: 121,
                                name: "基础配置",
                                children: [
                                    { id: 1211, name: "网站信息" },
                                    { id: 1212, name: "邮件配置" },
                                    { id: 1213, name: "短信配置" }
                                ]
                            },
                            {
                                id: 122,
                                name: "高级配置",
                                children: [
                                    { id: 1221, name: "缓存设置" },
                                    { id: 1222, name: "安全设置" }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                id: 2,
                name: "内容管理",
                children: [
                    {
                        id: 21,
                        name: "文章管理",
                        children: [
                            {
                                id: 211,
                                name: "文章列表",
                                children: [
                                    { id: 2111, name: "已发布" },
                                    { id: 2112, name: "草稿箱" },
                                    { id: 2113, name: "回收站" }
                                ]
                            },
                            {
                                id: 212,
                                name: "分类管理",
                                children: [
                                    { id: 2121, name: "新闻分类" },
                                    { id: 2122, name: "产品分类" },
                                    { id: 2123, name: "案例分类" }
                                ]
                            }
                        ]
                    },
                    {
                        id: 22,
                        name: "媒体管理",
                        children: [
                            {
                                id: 221,
                                name: "图片管理",
                                children: [
                                    { id: 2211, name: "产品图片" },
                                    { id: 2212, name: "新闻图片" },
                                    { id: 2213, name: "广告图片" }
                                ]
                            },
                            {
                                id: 222,
                                name: "视频管理",
                                children: [
                                    { id: 2221, name: "宣传视频" },
                                    { id: 2222, name: "教学视频" }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                id: 3,
                name: "数据统计",
                children: [
                    {
                        id: 31,
                        name: "访问统计",
                        children: [
                            {
                                id: 311,
                                name: "实时数据",
                                children: [
                                    { id: 3111, name: "在线用户" },
                                    { id: 3112, name: "访问量" },
                                    { id: 3113, name: "页面浏览" }
                                ]
                            },
                            {
                                id: 312,
                                name: "历史数据",
                                children: [
                                    { id: 3121, name: "日统计" },
                                    { id: 3122, name: "月统计" },
                                    { id: 3123, name: "年统计" }
                                ]
                            }
                        ]
                    },
                    {
                        id: 32,
                        name: "用户行为",
                        children: [
                            {
                                id: 321,
                                name: "点击统计",
                                children: [
                                    { id: 3211, name: "按钮点击" },
                                    { id: 3212, name: "链接点击" }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                id: 4,
                name: "财务管理",
                children: [
                    {
                        id: 41,
                        name: "订单管理",
                        children: [
                            {
                                id: 411,
                                name: "订单列表",
                                children: [
                                    { id: 4111, name: "待付款" },
                                    { id: 4112, name: "待发货" },
                                    { id: 4113, name: "已完成" },
                                    { id: 4114, name: "已取消" }
                                ]
                            },
                            {
                                id: 412,
                                name: "退款管理",
                                children: [
                                    { id: 4121, name: "退款申请" },
                                    { id: 4122, name: "退款处理" }
                                ]
                            }
                        ]
                    },
                    {
                        id: 42,
                        name: "财务报表",
                        children: [
                            {
                                id: 421,
                                name: "收入报表",
                                children: [
                                    { id: 4211, name: "日收入" },
                                    { id: 4212, name: "月收入" },
                                    { id: 4213, name: "年收入" }
                                ]
                            }
                        ]
                    }
                ]
            }
        ];

        // 生成菜单HTML
        function generateMenu(data, level = 1) {
            let html = '';
            
            data.forEach(item => {
                const hasChildren = item.children && item.children.length > 0;
                const levelClass = `level-${level}`;
                const childrenClass = hasChildren ? 'has-children' : '';
                
                html += `<li class="menu-item">`;
                html += `<a href="#" class="menu-link ${levelClass} ${childrenClass}" data-id="${item.id}">`;
                
                if (hasChildren) {
                    html += `<span class="menu-icon">▶</span>`;
                } else {
                    html += `<span class="menu-icon">●</span>`;
                }
                
                html += `${item.name}`;
                html += `</a>`;
                
                if (hasChildren) {
                    html += `<ul class="menu-list submenu">`;
                    html += generateMenu(item.children, level + 1);
                    html += `</ul>`;
                }
                
                html += `</li>`;
            });
            
            return html;
        }

        // 切换子菜单显示/隐藏
        function toggleSubmenu(link) {
            const submenu = link.nextElementSibling;
            const icon = link.querySelector('.menu-icon');
            
            if (submenu && submenu.classList.contains('submenu')) {
                if (submenu.classList.contains('show')) {
                    submenu.classList.remove('show');
                    icon.classList.remove('expanded');
                    link.classList.remove('expanded');
                } else {
                    submenu.classList.add('show');
                    icon.classList.add('expanded');
                    link.classList.add('expanded');
                }
            }
        }

        // 选择菜单项
        function selectMenuItem(link) {
            // 移除所有active状态
            document.querySelectorAll('.menu-link').forEach(item => {
                item.classList.remove('active');
            });
            
            // 添加active状态
            link.classList.add('active');
            
            console.log('选中菜单ID:', link.dataset.id, '名称:', link.textContent.trim());
        }

        // 初始化菜单
        function initMenu() {
            const menuList = document.getElementById('menuList');
            
            // 生成菜单HTML
            menuList.innerHTML = generateMenu(menuData);
            
            // 绑定点击事件
            menuList.addEventListener('click', function(e) {
                e.preventDefault();
                
                const link = e.target.closest('.menu-link');
                if (!link) return;
                
                if (link.classList.contains('has-children')) {
                    // 有子菜单，切换展开/收起
                    toggleSubmenu(link);
                } else {
                    // 没有子菜单，选中该项
                    selectMenuItem(link);
                }
            });
        }

        // 页面加载完成后初始化菜单
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，开始初始化菜单...');
            initMenu();
            console.log('菜单初始化完成');
        });

        // 如果DOMContentLoaded已经触发，直接初始化
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initMenu);
        } else {
            initMenu();
        }
    </script>
</body>
</html>